﻿<Page x:Class="WpfAnimation.PageDoubleAnimationKeyFrame"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
   d:DesignHeight="350" d:DesignWidth="880"
	Title="PageDoubleAnimationKeyFrame">
    <Canvas>
        <!-- Key frame animations enable you to create complex animations by specifying multiple destination values
        and controlling the animation's interpolation method. -->
        <Canvas>
            <!-- The position of this rectangle is animated using a key frame animation. -->
            <Rectangle Name="myRectangle"
        Fill="Transparent"
        Canvas.Top="100"
        Canvas.Left="10"
        Height="100"
        Width="100"
        Stroke="Black"
        StrokeThickness="5">
                <Rectangle.Triggers>
                    <EventTrigger RoutedEvent="Mouse.MouseDown">
                        <BeginStoryboard>
                            <Storyboard  >

                                <!-- Animate Canvas.Left attached property using 3 KeyFrames which animates
                  the rectangle along a path. This animation repeats indefinitely. -->
                                <DoubleAnimationUsingKeyFrames
                  Storyboard.TargetName="myRectangle"
                  Storyboard.TargetProperty="(Canvas.Left)">
                                        <!-- Using a LinearDoubleKeyFrame, the rectangle moves steadily from its
                      starting position to 500 over the first 3 seconds.  -->
                                        <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3" />
                                        <!-- Using a DiscreteDoubleKeyFrame, the rectangle suddenly appears at 400 after
                      the fourth second of the animation. -->
                                        <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4" />
                                        <!-- Using a SplineDoubleKeyFrame, the rectangle moves back to its starting point. The
                      animation starts out slowly at first and then speeds up. This KeyFrame ends after the 6th
                      second. -->
                                        <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="10" KeyTime="0:0:6" />
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Rectangle.Triggers>
            </Rectangle>
            
            <Rectangle Canvas.Left="500" Width="2" Height="400" Fill="Red" />
            <Rectangle Canvas.Left="400" Width="2" Height="400" Fill="Red" />
            <Rectangle Canvas.Left="10" Width="2" Height="400" Fill="Red" />
        </Canvas>
        <TextBlock Canvas.Left="542" Canvas.Top="56" Height="23" Name="textBlock1" xml:space="preserve" >
           
        </TextBlock>
    </Canvas>
</Page>
